<template>
  <div>
    <el-container>
    <el-header v-show="showNavi" style="padding: 0px">
    <el-menu :default-active="activeMenu" :class="fixed ? 'menu' :''" mode="horizontal" @select="handleSelect"
      background-color="#ddd" text-color="#000000" active-text-color="#409EFF">
      <el-menu-item index="home">
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 10px" preserveAspectRatio ="none">
          <use xlink:href="#icon-biaoqiankuozhan_shouye-391"></use>
        </svg>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="member">
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 10px">
          <use xlink:href="#icon-tubiaozhizuomoban3"></use>
        </svg>
        <span>成员</span>
      </el-menu-item>
      <el-menu-item index="paper">
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 10px">
          <use xlink:href="#icon-tubiaozhizuomoban2"></use>
        </svg>
        <span>论文</span>
      </el-menu-item>
      <el-menu-item index="album">
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 10px">
          <use xlink:href="#icon-xiangce"></use>
        </svg>
        <span>照片集</span>
      </el-menu-item>
      <el-menu-item index="contact">
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 10px">
          <use xlink:href="#icon-cansaitubiaozhuanqu-"></use>
        </svg>
        <span>联系方式</span>
      </el-menu-item>
      <el-menu-item index="edit" v-show="showEdit">
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 10px">
          <use xlink:href="#icon-bishua"></use>
        </svg>
        <span>编辑</span>
      </el-menu-item>
      <el-menu-item index="login" style="float: right" @click="showLogin = true" v-show="!showEdit" >
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 2px; ">
          <use xlink:href="#icon-denglu1"></use>
        </svg>
        <span>登录</span>
      </el-menu-item>
      <el-menu-item index="logout" style="float: right" @click="logout" v-show="showEdit">
        <svg class="ali-icon" aria-hidden="true" style="margin-right: 10px;">
          <use xlink:href="#icon-tuichu"></use>
        </svg>
        <span>注销</span>
      </el-menu-item>
      <el-dialog :modal-append-to-body="false" title="登录" :visible.sync="showLogin" @close="dialogClosed" @open="dialogOpened" width="400px">
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" @keyup.enter.native="login">
              <template slot="prepend">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-denglu"></use>
                </svg>
                账号
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" @keyup.enter.native="login">
              <template slot="prepend" >
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima1"></use>
                </svg>
                密码
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </div>
        <el-alert style="margin-top: 5%" type="error" v-show="showAlert">{{message}}</el-alert>
      </el-dialog>
    </el-menu>
    </el-header>
    <el-main style="height: 100%; border: 1px solid #eee;padding: 0;">
      <router-view v-bind:fixed="fixed" @setShowNavi="setShowNavi"></router-view>
    </el-main>
    <el-footer v-show="showNavi">
      <div class="copyright"><p>© 2021 <a href="https://gitee.com/ratei">ratei</a></p></div>
    </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  beforeMount () {
    const tokenStr = window.sessionStorage.getItem('token')
    this.showEdit = tokenStr != null
  },
  mounted () {
    window.addEventListener('scroll', this.fixedActiveBtn)
  },
  data () {
    return {
      fixed: false,
      lastActive: null,
      showLogin: false,
      showAlert: false,
      showEdit: false,
      showNavi: true,
      message: '',
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    activeMenu: {
      get () {
        return this.$store.state.activeMenu
      },
      set (value) {
        this.$store.commit('setActiveMenu', value)
      }
    }
  },
  methods: {
    fixedActiveBtn () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      scrollTop >= 0 ? this.fixed = true : this.fixed = false
    },
    setShowNavi (showNavi) {
      console.log(showNavi)
      this.showNavi = showNavi
    },
    handleSelect (key, keyPath) {
      if (key === 'login' || key === 'logout') {
        return
      }
      this.$router.push('/' + key)
    },
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    },
    dialogClosed () {
      this.activeMenu = this.lastActive
    },
    dialogOpened () {
      this.lastActive = this.activeMenu
      this.activeMenu = 'login'
    },
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (!res.success) {
          this.message = res.info
          this.showAlert = true
          return
        }
        this.showLogin = false
        this.showEdit = true
        this.lastActive = 'edit'
        this.$notify({
          title: '成功',
          message: res.info,
          type: 'success'
        })
        window.sessionStorage.setItem('token', res.token)
        this.$router.push('/edit')
      })
    },
    logout () {
      window.sessionStorage.clear()
      this.showEdit = false
      if (this.$route.path === '/edit') this.$router.push('/paper')
      else {
        this.activeMenu = 'logout'
        var that = this
        setTimeout(() => {
          that.activeMenu = this.$route.path.substr(1)
        }, 10)
      }
      this.$notify({
        title: '注销成功',
        message: '再见👋',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
.ali-icon {
  width: 1.5em;
  height: 2em;
  vertical-align: -.7em;
  fill: currentColor;
  overflow: hidden;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.example{/*父元素div*/
  position: relative;/*相対定位*/
  background-color: #96abd8;
}

.menu{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.example div {
  position: absolute;/*绝対定位*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.example a{
  color: white;
  text-decoration:underline;
}

#banner{
  display: block;
  width: 100%;
  filter:blur(3px);
}

.example h1 {
  color: white;/*文字设为白色*/
  font-size: 33.4px;
    margin: 10px;
    font-weight: 700;
}

.example h2 {
  color: white;/*文字设为白色*/
  font-size: 20px;
  font-weight: 400;
  margin: 10px;
}

#cqulogo{
  margin-top:2.5vw;
  width:57.6px;
  height:57.6px
}

@media screen and (max-width:1480px) {
  .example h1 {
    font-size: 28.4px;
    margin: 10px;
    font-weight: 700;
  }
  .example h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 8px;
  }
  #cqulogo{
    margin-top: 23px;
    width: 45px;
    height: 45px
  }
}

</style>
